<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Steps 步骤条</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。</p>
	<p class="desc">设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。 需要定宽的步骤条时，设置 space 属性即可，它接受 Number， 单位为 px， 如果不设置，则为自适应。 设置 finish-status 属性可以改变已经完成的步骤的状态。</p>
	<el-steps :active="active" finish-status="success">
		<el-step title="Step 1" ></el-step>
		<el-step title="Step 2" ></el-step>
		<el-step title="Step 3" ></el-step>
	</el-steps>
	<el-button style="margin-top: 12px" @click="next">Next step</el-button>
	
	<el-divider content-position="left">含状态的步骤条</el-divider><!-- =============================================================== -->
	<p class="desc">每一步骤显示出该步骤的状态。</p>
	<p class="desc">也可以使用 title 具名插槽，可以用 slot 的方式来取代属性的设置， 在本文档最后的列表中有所有的插槽可供参考。</p>
	<el-steps :space="300" :active="2" finish-status="success">
		<el-step title="Done"></el-step>
		<el-step title="Processing"></el-step>
		<el-step title="Step 3"></el-step>
	</el-steps>
	
	<el-divider content-position="left">居中的步骤条</el-divider><!-- =============================================================== -->
	<p class="desc">标题和描述可以居中。</p>
	<el-steps :active="2" align-center>
		<el-step title="Step 1" description="Some description1"></el-step>
		<el-step title="Step 2" description="Some description2"></el-step>
		<el-step title="Step 3" description="Some description3"></el-step>
		<el-step title="Step 4" description="Some description4"></el-step>
	</el-steps>
	
	<el-divider content-position="left">带描述的步骤栏</el-divider><!-- =============================================================== -->
	<p class="desc">每一步都有描述。</p>
	<el-steps :active="1">
		<el-step title="Step 1" description="Some description1"></el-step>
		<el-step title="Step 2" description="Some description2"></el-step>
		<el-step title="Step 3" description="Some description3"></el-step>
	</el-steps>
	
	<el-divider content-position="left">带图标的步骤条</el-divider><!-- =============================================================== -->
	<p class="desc">可以在步骤栏中使用各种自定义图标。</p>
	<p class="desc">通过 icon 属性来设置图标， 图标的类型可以参考 Icon 组件的文档， 除此以外，还能通过具名 slot 来使用自定义的图标。</p>
	<el-steps :active="1">
		<el-step title="Step 1" :icon="Icons.Edit"></el-step>
		<el-step title="Step 2" :icon="Icons.Upload"></el-step>
		<el-step title="Step 3" :icon="Icons.Picture"></el-step>
	</el-steps>
	
	<el-divider content-position="left">垂直的步骤条</el-divider><!-- =============================================================== -->
	<p class="desc">垂直方向的步骤条。</p>
	<p class="desc">只需要在 el-steps 元素中设置 direction 属性为 vertical 即可。</p>
	<div style="height: 300px">
		<el-steps direction="vertical" :active="1">
			<el-step title="Step 1"></el-step>
			<el-step title="Step 2"></el-step>
			<el-step title="Step 3"></el-step>
			<el-step title="Step 4"></el-step>
		</el-steps>
	</div>
	
	<el-divider content-position="left">简洁风格的步骤条</el-divider><!-- =============================================================== -->
	<p class="desc">设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效</p>
	<el-steps :space="200" :active="1" simple>
		<el-step title="Step 1" :icon="Icons.Edit"></el-step>
		<el-step title="Step 2" :icon="Icons.UploadFilled"></el-step>
		<el-step title="Step 3" :icon="Icons.Picture"></el-step>
	</el-steps>
	
	<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
		<el-step title="Step 1"></el-step>
		<el-step title="Step 2"></el-step>
		<el-step title="Step 3"></el-step>
	</el-steps>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!',
			Icons: ElementPlusIconsVue,
			active: 0,
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		next(){
			if(this.active++ > 2){
				this.active = 0;
			}
		}
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
app.mount("#app");

</script>
</html>